<template>
  <div class="login-container">
    <!-- <toubu :title="'登录'"></toubu> -->
    <van-nav-bar title="登录" left-arrow>
      <template #left>
        <van-icon color="#fff" name="cross" size="18" @click="logout" />
      </template>
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-field v-model="user.mobile" placeholder="请输入手机号" :rules="loginRule.mobile">
          <template slot="left-icon">
            <i class="toutiao iconshouji" size="18" color="#fff" />
          </template>
        </van-field>
        <van-field
          v-model="user.code"
          center
          clearable
          placeholder="请输入短信验证码"
          :rules="loginRule.code"
        >
          <template #left-icon>
            <i class="toutiao iconyanzhengma" size="18" color="#fff" />
          </template>
          <template #button>
            <van-button
              round
              v-if="timeFlag"
              color="#ccc"
              size="small"
              type="primary"
              @click.stop.prevent="getCode"
            >发送验证码</van-button>
            <van-count-down @finish="finish" v-else :time="time" format="ss s" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { code_api, login_api } from "@/api/user.js";
export default {
  data() {
    return {
      // 登陆数据
      user: {
        mobile: 13911111111,
        code: 246810,
      },
      // 登陆验证规则
      loginRule: {
        mobile: [
          { required: true, message: "请输入手机号" },
          { pattern: /^1[3|5|8|9]\d{9}$/, message: "请输入合法的手机号" },
        ],
        code: [
          { required: true, message: "请填写验证码" },
          { pattern: /^\d{6}$/, message: "请输入6位数验证码" },
        ],
      },
      time: 60 * 1000,
      timeFlag: true,
    };
  },
  methods: {
    // 登陆
    async onSubmit() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "登陆中",
      });
      try {
        const { data: res } = await login_api(this.user);
        // console.log(res, 1);
        this.$toast.success("登录成功");
        this.$store.commit("SET_TOKEN", res.data);
        // window.sessionStorage.setItem("token", JSON.stringify(res.data));
        this.$router.push("/weidenglu");
      } catch (err) {
        // console.log(err.response);
        if (err.response.status === 400) {
          this.$toast.fail("手机号格式不正确或验证码失效");
        } else {
          this.$toast.fail("登录失败,请稍后重试");
        }
      }
    },
    // 发送验证码
    async getCode() {
      this.timeFlag = !this.timeFlag;
      try {
        const res = await code_api(this.user.mobile);
        // console.log(res, 2);
        if (res.status === 200) {
          this.$toast.success("验证码发送成功");
        }
      } catch (err) {
        if (err.response.status === 404) {
          this.$toast.fail("手机号格式不正确");
        } else {
          this.$toast.fail("获取验证码失败,请稍后重试");
        }
      }
    },
    // 监听倒计时走完毕
    finish() {
      this.timeFlag = !this.timeFlag;
    },
    // 退出登录
    logout() {
      this.$router.push("/weidenglu");
    },
  },
};
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: #3296fa;
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
}
.van-button--info {
  background-color: #3396fc;
  opacity: 0.5;
}
</style>